<template>
  <main ref="el" class="container">
    <template :key="id" v-for="({ id, type }, index) in compList">
      <empty
        :key="`insert-${id}-${index}`"
        :height="dragHeight"
        v-if="isDragIn && dropPos === index"
      />
      <component
        :is="type"
        :id="id"
        :style="getModStyle(type)"
        @drag="(e, dom) => onStartDrag(e, dom, index)"
      />
    </template>
    <empty
      :key="`insert-end`"
      :height="dragHeight"
      v-if="isDragIn && (dropPos === compList.length || !compList.length)"
    />
  </main>
</template>

<script>
import useDrag from "./useDrag";
import Empty from "./components/empty";
import Customize from "./components/customize";
import BaseInfo from "./components/base-info";
import Description from "./components/description";
import Experience from "./components/experience";
import Head from "./components/head";
import Intention from "./components/intention";
import Intro from "./components/intro";
import Skill from "./components/skill";
export default {
  name: "index",
  components: {
    Empty,
    Customize,
    BaseInfo,
    Description,
    Experience,
    Head,
    Intention,
    Intro,
    Skill,
  },
  props: {
    compList: {
      type: Array,
      default: () => [],
    },
    dropAble: {
      type: Boolean,
      default: true,
    },
    id: Number,
  },
  setup(props) {
    const { state, el, onStartDrag, dragHeight } = useDrag(
      props.id,
      props.compList,
      {
        dropAble: props.dropAble,
      }
    );

    const getModStyle = (type) => {
      return ["intro", "head"].includes(type)
        ? {}
        : { paddingBottom: "var(--modBottom)" };
    };
    return {
      ...state,
      el,
      dragHeight,
      onStartDrag,
      getModStyle,
    };
  },
};
</script>

<style scoped lang="less">
.container {
  padding: var(--containerPadding);
}
</style>
